<template>
    <div class="echarts" style="width:100%">
        <div :id="counterId" :style="{width: echart_width, height: echart_height}" @click="changeTypes($event)"></div>
    </div>
</template>

<script>
    import 'echarts-liquidfill'
    import config from '@/api/config.js'
    import util from '@/utils/util.js'
    import axios from 'axios'
    export default {
        name: "echarts",
        props: {
            /**
             * @description 默认宽度 px
             */
            echart_width: {
                type: String,
                default: "100%"
            },
            /**
             * @description 默认高度 px
             */
            echart_height: {
                type: String,
                default: "100%"
            },
            /**
             * @description 配置项
             */
            options: {},
            type: ''
        },
        computed: {
            counterId() {
                return `echarts_${this._uid}`;
            }
        },
        created() {},
        data() {
            return {
                chart: ""
            };
        },
        watch: {
            //观察option的变化
            options: {
                handler(newVal, oldVal) {
                    if (this.chart) {
                        if (newVal) {
                            this.chart.setOption(newVal);
                        } else {
                            this.chart.setOption(oldVal);
                        }
                    } else {
                        this.init();
                    }
                },
                deep: true //对象内部属性的监听，关键。
            }
        },
        mounted() {
            this.init(this.options);
        },
        methods: {
            init(options) {
                // console.log(options);
                this.chart = this.$echarts.init(document.getElementById(this.counterId));
                this.chart.setOption(options);
                // window.onresize = myChart.resize; // 自适应
                const self = this;
                window.addEventListener("resize", function() {
                    self.chart.resize();
                });
                this.chart.on('click',(e)=> {
                    //console.log("888",e)
                    //路内点击哪个区传出去
                    if(e.componentType=="xAxis"){
                        this.$emit("getCityArea",e.value)
                    }
                     //路外
                    let name = e.name
                    if(name == "交通枢纽"){
                        this.type = '1';
                    }else if(name == "人防工程"){
                        this.type = '2';
                       
                    }else if(name == "老旧小区"){
                        this.type = '3'
                        
                    }else if(name == "旅游景区"){
                        this.type = '4'
                        
                    }else if(name == "医院"){
                        this.type = '5' 
                    }
                    if(name == "交通枢纽"||name == "人防工程"||name == "老旧小区"||name == "旅游景区"||name == "医院"){
                        axios({
                            method:'post',
                            url:config.basePath+'park/index/getWuLingYuParkNum',
                            data:{
                                type:this.type
                            }, header:{
                                'Content-Type':'application/json'
                            }
                        }).then(res=>{
                            //console.log("9999",res)
                            this.$emit("changeMarkData", res.data.data);
                            //this.markData = res.data.data
                        }).catch(err=>{})
                    }  
                    // this.$api.get(config.basePath+'park/index/getWuLingYuParkNum', {}, response => {
                    //     if (response.status >= 200 && response.status < 300) {
                    //         // this.markData = response.data.data
                    //         console.log("5555",response.data.data);
                    //     } else {
                    //         //console.log(response.message);
                    //     }
                    // });
                })
            },
            changeTypes(e){
                
            },
        }
    };
</script>
